<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href = "../css/bootstrap.min.css">
    <script type="application/javascript" src="../js/jquery-1.9.0.min.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <title>text</title>
</head>
<body>
    <button id="btn">显示信息</button>
    <button id="btn2">更改信息</button>
    <button id="btn3">隐藏信息</button>
    <button id="append">加到后面</button>
    <button id="prepend">加到前面</button>
    <button id="before">加到前一个</button>
    <button id="after">加到后一个</button>
    <p id="msg"></p>
    <script>
        $("#btn").on("click",function (){
            $("#msg").text("Hello,jQuery!");
            $("#msg2").text($("#book").val());
            $("#msg3").text($("#book").html());
            $("#msg4").text($("a").attr("href"));
            $("#google").attr("href","https://www.baidu.com");
        });
        $("#btn2").on("click",function (){
            $("a").attr({
                "title" : "This is gitee",
                "href" : "https://gitee.com"
            });
            $("#x").prop("disabled",true);
            $("#y").prop("checked",true);
        });
        $("#btn3").on("click",function (){
            $("#x").prop("disabled",false);
        });
        $("#append").on("click",function (){
            $("#fix").append("<b><i>加到后面</i></b>")
        });
        $("#prepend").on("click",function (){
            $("#fix").prepend("<b><i>加到前面</i></b>")
        });
        $("#before").on("click",function (){
            $("#fix").before("<b><i>加到前一个</i></b>")
        });
        $("#after").on("click",function (){
            $("#fix").after("<b><i>加到后一个</i></b>")
        });
    </script>
    <form id="x">
        <label for="book"></label>
        <select id="book">
            <option value="1">AA</option>
            <option value="2">BB</option>
            <option value="3">CC</option>
        </select>
        <p id="msg2"></p>
        <p id="msg3"></p>
        <a href="https://www.baidu.com">baidu</a>
        <p id="msg4"></p>
        <a href="" id="google">点击后改baidu</a>
        <label>
            <input type="checkbox" id="y"/>
        </label>

        <p id="fix">固定</p>
    </form>
</body>
</html>